<template>
  <div>
    <a-upload
      :disabled="disabled"
      :action="$A.baseUrl[0]+'/safety/system/upload'"
      listType="picture-card"
      :accept="type"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < Maxlength || disabled">
        <a-icon type="plus"/>
        <div class="ant-upload-text">{{tipText}}</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <div style="height:auto;width:100%;">
        <img alt="example" style="width: 100%" :src="previewImage"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'demo',
    props: {
      Maxlength: {
        type: Number,
        default: 3
      },
      tipText: {
        type: String,
        default: '点击上传'
      },
      success: {
        type: Function,
        default: () => {
        }
      },
      disabled: {
        type: Boolean,
        default: false
      },
      defaultList: {
        type: Array,
        default: []
      },
      type: {
        type: String,
        default: 'image/gif,image/jpg,image/png,image/svg,image/jpeg'
      },
    },
    data() {
      return {
        api: {
          uploadApi: '/safety/system/upload'
        },
        previewVisible: false,
        previewImage: '',
        fileList: [],
        cbTimer: null,
        imgId: ''
      }
    },
    created() {
      this.imgId = this.$A.getUUID()
      this.fileList = this.defaultList
    },
    methods: {
      imgReviewSuit() {
        let ele = document.getElementById('signImgSuit')
        if (ele) {
          if (ele.clientWidth > ele.clientHeight) {
            ele.style.width = `100%`;
            ele.style.height = `auto`;
          } else {
            ele.style.height = `100%`;
            ele.style.width = `auto`;
          }
        }
      },
      handleCancel() {
        this.previewVisible = false;
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl;
        this.previewVisible = true;
      },
      handleChange({fileList}) {
        this.fileList = fileList;
        this.cbTimer && clearTimeout(this.cbTimer)
        this.cbTimer = setTimeout(() => {
          this.success(this.fileList)
        }, 300)
      },

    }
  }
</script>
<style lang="scss">
</style>
